<template>
  <div class="factory-page">
    <!-- 页面头部：标题 + 返回 -->
    <div class="page-header">
      <h2 class="page-title">我的工厂列表</h2>
    
    </div>

    <!-- 搜索区域 -->
    <div class="search-area">
      <el-input 
        v-model="searchKey" 
        placeholder="请输入品牌/负责人等关键词" 
        style="width: 200px;" 
        @keyup.enter="handleSearch"
      />
      <el-button 
        type="primary" 
        class="search-btn" 
        @click="handleSearch"
        style="background-color: #1abc9c; border-color: #1abc9c;"
      >
        搜索
      </el-button>
    </div>

    <!-- 工厂列表表格 -->
    <el-table 
      :data="paginatedFactoryList" 
      border 
      stripe 
      style="width: 100%; margin-top: 15px;"
  
      :loading="tableLoading"
    >
      <!-- 表格列 -->
      <el-table-column prop="brand" label="品牌"  align="center" />
      <el-table-column prop="agentBrand" label="代理品牌"  align="center" />
      <el-table-column prop="address" label="地址"  align="center" />
      <el-table-column prop="responsiblePerson" label="负责人"  align="center" />
      <el-table-column prop="contact" label="联系方式"  align="center" />
      <el-table-column prop="brandDiscount" label="品牌折扣"  align="center" />
      <el-table-column prop="brandManager" label="品牌经理"  align="center" />
      <el-table-column prop="instructor" label="导师"  align="center" />
      <el-table-column prop="cashAccount" label="现金账户"  align="center" />
      <el-table-column prop="retailFundAccount" label="零售价资金账户"  align="center" />
      <el-table-column prop="retailDeliveryAccount" label="零售配送货账户"  align="center" />
      <el-table-column prop="email" label="邮箱"  align="center" />
      
      <!-- 采购订单列 -->
      <el-table-column label="采购订单" align="center" fixed="right" width="250">
        <template #default="scope">
          <el-button 
            type="primary" 
            
            @click="handleAddPurchase(scope.row)"
            style="margin-right: 5px;"
          >
            新增采购
          </el-button>
          <el-button 
            type="default" 
         
            @click="handleHistoryOrder(scope.row)"
          >
            往期订单
          </el-button>
        </template>
      </el-table-column>
      
      <!-- 操作列 -->
      <el-table-column label="操作" align="center"  fixed="right" width="180">
        <template #default="scope">
          <el-button 
            type="success" 
          
            @click="handleViewDetail(scope.row)"
            style="margin-right: 5px; background-color: #27ae60; border-color: #27ae60;"
          >
            查看
          </el-button>
          <el-button 
            type="info" 
        
            @click="handleMaterialLibrary"
            
          >
            素材库
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页区域 -->
    <div class="pagination-area" style="margin-top: 15px; display: flex; align-items: center; gap: 10px;">
      <span>共 {{ total }} 条 共 {{ totalPages }} 页</span>
      <el-pagination
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30]"
        :page-size="pageSize"
        layout="prev, pager, next"
        :total="total"
        background
      />
      <el-select 
        v-model="pageSize" 
        @change="handleSizeChange" 
        placeholder="条数/页" 
        style="width: 100px;"
      
      >
        <el-option label="10条/页" value="10" />
        <el-option label="20条/页" value="20" />
        <el-option label="30条/页" value="30" />
      </el-select>
      <span>跳至</span>
      <el-input 
        v-model="jumpPage" 
        type="number" 
        style="width: 50px; margin: 0 5px;"
     
        min="1"
        @keyup.enter="handleJumpPage"
      />页
      <el-button 
        type="primary" 
   
        @click="handleJumpPage"
        style="background-color: #1abc9c; border-color: #1abc9c;"
      >
        确定
      </el-button>
    </div>

    <!-- 1. 新增采购订单弹窗（图一） -->
    <el-dialog 
      title="新增采购订单" 
      v-model="addPurchaseVisible" 
      width="80%" 
      top="5vh"
      destroy-on-close
    >
      <!-- 采购订单头部信息 -->
      <div class="purchase-header" style="display: flex; gap: 20px; margin-bottom: 20px;">
        <div class="form-item">
          <label>采购时间：</label>
          <el-input v-model="purchaseForm.purchaseTime" disabled style="width: 180px;" />
        </div>
        <div class="form-item">
          <label>订单编号：</label>
          <el-input v-model="purchaseForm.orderNo" disabled style="width: 180px;" />
        </div>
        <div class="form-item">
          <label>经办人：</label>
          <el-input v-model="purchaseForm.handler" disabled style="width: 180px;" />
        </div>
      </div>

      <!-- 采购产品表格 -->
      <el-table 
        :data="purchaseProductList" 
        border 
      
        style="width: 100%; margin-bottom: 20px;"
      >
        <el-table-column type="selection" width="50" align="center" />
        <el-table-column label="操作" width="200" align="center">
          <template #default>
            <el-button 
              type="success" 
              @click="handleOpenProductSelect"
               style="display: inline-block;"
            >
              增
            </el-button>
            <el-button 
              type="danger" 
              @click="handleDeleteProduct"
            >
              删
            </el-button>
          </template>
        </el-table-column>
        <el-table-column prop="productName" label="采购产品" align="center" />
        <el-table-column prop="productNo" label="产品编号" align="center" />
        <el-table-column prop="brand" label="归属品牌" align="center" />
        <el-table-column prop="quantity" label="数量" align="center" />
      </el-table>

      <div style="text-align: center;">
        <el-button 
          type="primary" 
          @click="handleSubmitPurchase"
          style="background-color: #1abc9c; border-color: #1abc9c;"
        >
          提交
        </el-button>
      </div>
    </el-dialog>

    <!-- 2. 产品选择弹窗（图二） -->
    <el-dialog 
      title="选择采购产品" 
      v-model="productSelectVisible" 
      width="90%" 
      top="5vh"
      destroy-on-close
    >
      <!-- 产品筛选条件 -->
      <div class="product-filter" style="display: flex; gap: 10px; margin-bottom: 15px; align-items: center;">
        <label>厂商：</label>
        <el-select v-model="productFilter.manufacturer" placeholder="选择厂商" style="width: 120px;">
          <el-option label="厂商名字A" value="厂商名字A" />
        </el-select>
        <label>品牌：</label>
        <el-select v-model="productFilter.brand" placeholder="选择品牌" style="width: 120px;">
          <el-option label="阿玛尼" value="阿玛尼" />
        </el-select>
        <label>类型：</label>
        <el-select v-model="productFilter.type" placeholder="选择类型" style="width: 100px;">
          <el-option label="单品" value="单品" />
        </el-select>
        <el-input 
          v-model="productFilter.keyword" 
          placeholder="商品" 
          style="width: 150px;"
        />
        <el-button 
          type="primary" 
          @click="handleSearchProduct"
          style="background-color: #1abc9c; border-color: #1abc9c;"
        >
          搜索
        </el-button>
      </div>

      <!-- 产品列表 -->
      <el-table 
        :data="productList" 
        border 
        stripe 
        
        style="width: 100%;"
      >
        <el-table-column prop="productNo" label="产品编号" align="center" />
        <el-table-column prop="productName" label="产品名称" align="center" />
        <el-table-column prop="spec" label="规格" align="center" />
        <el-table-column prop="retailPrice" label="零售价" align="center" />
        <el-table-column prop="discount" label="折扣" align="center" />
        <el-table-column prop="discountPrice" label="折扣价" align="center" />
        <el-table-column prop="specialPrice" label="特价" align="center" />
        <el-table-column label="数量" align="center" width="160">
          <template #default="scope">
            <el-button 
              type="primary" 
           
              icon="minus"
              @click="scope.row.quantity > 1 && (scope.row.quantity--)"
              circle
              style="padding: 0; width: 20px; height: 20px; line-height: 20px;"
            />
            <el-input 
              v-model.number="scope.row.quantity" 
              type="number" 
              min="1"
              style="width: 50px; display: inline-block; margin: 0 5px;"
          
            />
            <el-button 
              type="primary" 
      
              icon="plus"
              @click="scope.row.quantity++"
              circle
              style="padding: 0; width: 20px; height: 20px; line-height: 20px;"
            />
          </template>
        </el-table-column>
        <el-table-column prop="totalAmount" label="总金额" align="center" />
        <el-table-column prop="discountTotal" label="折扣总金额" align="center" />
        <el-table-column label="操作" align="center" width="80">
          <template #default="scope">
            <el-button 
              type="success" 
              
              @click="handleSelectProduct(scope.row)"
              style="background-color: #27ae60; border-color: #27ae60;"
            >
              选择
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

    <!-- 3. 往期采购订单弹窗（图三） -->
    <el-dialog 
      title="往期采购订单" 
      v-model="historyOrderVisible" 
      width="90%" 
      top="5vh"
      destroy-on-close
    >
      <el-table 
        :data="historyOrderList" 
        border 
        stripe 
        
        style="width: 100%;"
      >
        <el-table-column prop="serialNo" label="序号" align="center" width="60" />
        <el-table-column prop="productName" label="产品名称" align="center" />
        <el-table-column prop="brand" label="所属品牌" align="center" />
        <el-table-column prop="manufacturer" label="所属厂商" align="center" />
        <el-table-column prop="skuNo" label="SKU条码" align="center" />
        <el-table-column prop="spec" label="规格" align="center" />
        <el-table-column prop="quantity" label="数量" align="center" />
        <el-table-column prop="unitPrice" label="单价" align="center" />
        <el-table-column prop="amount" label="金额" align="center" />
        <el-table-column prop="discount" label="优惠折扣(0.9为9折)" align="center" />
        <el-table-column prop="payType" label="支付方式" align="center" />
        <el-table-column prop="receiver" label="收货人" align="center" />
        <el-table-column prop="receiveAddr" label="收货地址" align="center" />
        <el-table-column prop="sender" label="发货人" align="center" />
        <el-table-column prop="contact" label="联系电话" align="center" />
        <el-table-column prop="status" label="状态" align="center" width="80">
          <template #default="scope">
            <el-tag 
              :type="scope.row.status === '已完成' ? 'success' : 'warning'"
            >
              {{ scope.row.status }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="300">
          <template #default>
            <el-button type="danger"   style="margin-right: 5px;">删除</el-button>
            <el-button type="warning"  style="margin-right: 5px;">退货</el-button>
            <el-button type="primary" >换货</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="history-pagination" style="margin-top: 15px; display: flex; align-items: center; gap: 10px;">
        <span>共 {{ historyTotal }} 条 共 {{ historyTotalPages }} 页</span>
        <el-pagination
          @current-change="handleHistoryPageChange"
          :current-page="historyCurrentPage"
          layout="prev, pager, next"
          :total="historyTotal"
          background
         
        />
        <el-select 
          v-model="historyPageSize" 
          placeholder="条数/页" 
          style="width: 100px;"
          
        >
          <el-option label="10条/页" value="10" />
        </el-select>
        <span>跳至</span>
        <el-input 
          v-model="historyJumpPage" 
          type="number" 
          style="width: 50px; margin: 0 5px;"
        
          min="1"
        />页
        <el-button 
          type="primary" 
        
          @click="handleHistoryJumpPage"
          style="background-color: #1abc9c; border-color: #1abc9c;"
        >
          确定
        </el-button>
      </div>
    </el-dialog>

    <!-- 4. 查看弹窗（品牌管理，图四） -->
    <el-dialog 
      title="品牌管理" 
      v-model="detailVisible" 
      width="80%" 
      top="5vh"
      destroy-on-close
    >
      <el-table 
        :data="brandProductList" 
        border 
        stripe 
       
        style="width: 100%;"
      >
        <el-table-column prop="serialNo" label="序号" align="center" width="60" />
        <el-table-column prop="productName" label="产品名称" align="center" />
        <el-table-column prop="brand" label="所属品牌" align="center" />
        <el-table-column prop="manufacturer" label="品牌厂商" align="center" />
        <el-table-column prop="unitPrice" label="单价" align="center" />
        <el-table-column prop="stock" label="数量(库存)" align="center" />
        <el-table-column prop="saleStock" label="销售库存" align="center" />
        <el-table-column prop="skuNo" label="sku条码" align="center" />
        <el-table-column prop="discount" label="折扣" align="center" />
        <el-table-column prop="spec" label="规格" align="center" />
        <el-table-column label="操作" align="center" width="200">
          <template #default>
            <el-button type="primary"  style="margin-right: 5px;">修改</el-button>
            <el-button type="danger" >删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="brand-pagination" style="margin-top: 15px; display: flex; align-items: center; gap: 10px;">
        <span>共 {{ brandTotal }} 条 共 {{ brandTotalPages }} 页</span>
        <el-pagination
          @current-change="handleBrandPageChange"
          :current-page="brandCurrentPage"
          layout="prev, pager, next"
          :total="brandTotal"
          background
   
        />
        <el-select 
          v-model="brandPageSize" 
          placeholder="条数/页" 
          style="width: 100px;"
      
        >
          <el-option label="10条/页" value="10" />
        </el-select>
        <span>跳至</span>
        <el-input 
          v-model="brandJumpPage" 
          type="number" 
          style="width: 50px; margin: 0 5px;"
       
          min="1"
        />页
        <el-button 
          type="primary" 
         
          @click="handleBrandJumpPage"
          style="background-color: #1abc9c; border-color: #1abc9c;"
        >
          确定
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed, reactive, toRefs, onMounted } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { useRouter } from 'vue-router';
// 模拟接口请求
const mockApi = {
  // 获取工厂列表
  getFactoryList: (params) => {
    return new Promise(resolve => {
      setTimeout(() => {
        resolve({
          code: 200,
          data: [
            {
              brand: '工厂A',
              agentBrand: '阿玛尼',
              address: '江苏省南京市建邺区',
              responsiblePerson: '李云',
              contact: '15156107482',
              brandDiscount: '',
              brandManager: '张虎',
              instructor: '李笑笑',
              cashAccount: '',
              retailFundAccount: '',
              retailDeliveryAccount: '',
              email: '248439182@qq.com'
            }
          ],
          total: 1
        });
      }, 300);
    });
  },
  // 获取产品列表
  getProductList: (params) => {
    return new Promise(resolve => {
      setTimeout(() => {
        resolve({
          code: 200,
          data: [
            {
              productNo: '485445',
              productName: '阿玛尼四季套盒',
              spec: '1',
              retailPrice: '¥21212',
              discount: '2.0折',
              discountPrice: '无',
              specialPrice: '¥21212',
              quantity: 1,
              totalAmount: '¥9999',
              discountTotal: '¥21212'
            },
            {
              productNo: '485445',
              productName: '雅诗兰黛',
              spec: '1',
              retailPrice: '¥21212',
              discount: '2.0折',
              discountPrice: '444',
              specialPrice: '无',
              quantity: 1,
              totalAmount: '¥9999',
              discountTotal: '¥21212'
            }
          ]
        });
      }, 300);
    });
  },
  // 获取往期订单
  getHistoryOrder: (params) => {
    return new Promise(resolve => {
      setTimeout(() => {
        resolve({
          code: 200,
          data: [
            {
              serialNo: 1,
              productName: '产品A',
              brand: '阿玛尼',
              manufacturer: '工厂A',
              skuNo: '21353688',
              spec: '1',
              quantity: 18,
              unitPrice: '¥90',
              amount: '¥1620',
              discount: '0.9',
              payType: '银行支付',
              receiver: '李云',
              receiveAddr: '河南省张家界',
              sender: '张三',
              contact: '15148793857',
              status: '已完成'
            },
            {
              serialNo: 2,
              productName: '产品A',
              brand: '阿玛尼',
              manufacturer: '工厂A',
              skuNo: '21353688',
              spec: '1',
              quantity: 18,
              unitPrice: '¥90',
              amount: '¥1620',
              discount: '0.9',
              payType: '银行支付',
              receiver: '李云',
              receiveAddr: '河南省张家界',
              sender: '张三',
              contact: '15148793857',
              status: '待收货'
            }
          ],
          total: 2
        });
      }, 300);
    });
  },
  // 获取品牌产品列表
  getBrandProductList: (params) => {
    return new Promise(resolve => {
      setTimeout(() => {
        resolve({
          code: 200,
          data: [
            {
              serialNo: 1,
              productName: '产品A',
              brand: 'GUCCI',
              manufacturer: '工厂A',
              unitPrice: '¥90',
              stock: 22000,
              saleStock: 18000,
              skuNo: '',
              discount: '',
              spec: ''
            },
            {
              serialNo: 2,
              productName: '产品B',
              brand: 'GUCCI',
              manufacturer: '工厂A',
              unitPrice: '¥90',
              stock: 22000,
              saleStock: 18000,
              skuNo: '',
              discount: '',
              spec: ''
            },
            {
              serialNo: 3,
              productName: '产品3',
              brand: 'GUCCI',
              manufacturer: '工厂A',
              unitPrice: '¥90',
              stock: 22000,
              saleStock: 18000,
              skuNo: '',
              discount: '',
              spec: ''
            }
          ],
          total: 3
        });
      }, 300);
    });
  },
  // 提交采购订单
  submitPurchase: (form) => {
    return new Promise(resolve => {
      setTimeout(() => {
        resolve({ code: 200, message: '采购订单提交成功' });
      }, 300);
    });
  }
};

// 状态管理
const state = reactive({
  // 工厂列表
  searchKey: '',
  factoryList: [],
  filteredFactoryList: [],
  total: 0,
  tableLoading: false,
  // 分页
  currentPage: 1,
  pageSize: 10,
  jumpPage: '',
  // 弹窗状态
  addPurchaseVisible: false,
  productSelectVisible: false,
  historyOrderVisible: false,
  detailVisible: false,
  // 新增采购订单数据
  purchaseForm: {
    purchaseTime: '2022年5月27日23:12:35',
    orderNo: '231298213617824',
    handler: '吴磊'
  },
  purchaseProductList: [
    {
      productName: '香奈儿小包包',
      productNo: '5450212',
      brand: '阿玛尼',
      quantity: 79000
    }
  ],
  // 产品选择数据
  productFilter: {
    manufacturer: '厂商名字A',
    brand: '阿玛尼',
    type: '单品',
    keyword: ''
  },
  productList: [],
  // 往期订单数据
  historyOrderList: [],
  historyTotal: 0,
  historyCurrentPage: 1,
  historyPageSize: 10,
  historyJumpPage: '',
  // 品牌管理数据
  brandProductList: [],
  brandTotal: 0,
  brandCurrentPage: 1,
  brandPageSize: 10,
  brandJumpPage: ''
});

const {
  searchKey,
  factoryList,
  filteredFactoryList,
  total,
  tableLoading,
  currentPage,
  pageSize,
  jumpPage,
  addPurchaseVisible,
  productSelectVisible,
  historyOrderVisible,
  detailVisible,
  purchaseForm,
  purchaseProductList,
  productFilter,
  productList,
  historyOrderList,
  historyTotal,
  historyCurrentPage,
  historyPageSize,
  historyJumpPage,
  brandProductList,
  brandTotal,
  brandCurrentPage,
  brandPageSize,
  brandJumpPage
} = toRefs(state);

// 计算总页数（工厂列表）
const totalPages = computed(() => {
  return Math.ceil(total.value / pageSize.value) || 1;
});

// 分页后工厂列表
const paginatedFactoryList = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value;
  const end = start + pageSize.value;
  return filteredFactoryList.value.slice(start, end);
});

// 往期订单总页数
const historyTotalPages = computed(() => {
  return Math.ceil(historyTotal.value / historyPageSize.value) || 1;
});

// 品牌管理总页数
const brandTotalPages = computed(() => {
  return Math.ceil(brandTotal.value / brandPageSize.value) || 1;
});

// 初始化工厂列表
const initPage = async () => {
  try {
    tableLoading.value = true;
    const res = await mockApi.getFactoryList({
      page: currentPage.value,
      size: pageSize.value,
      keyword: searchKey.value
    });
    if (res.code === 200) {
      factoryList.value = res.data;
      filteredFactoryList.value = res.data;
      total.value = res.total;
    }
  } catch (err) {
    ElMessage.error('加载工厂列表失败');
  } finally {
    tableLoading.value = false;
  }
};

onMounted(() => {
  initPage();
});

// 搜索工厂
const handleSearch = () => {
  currentPage.value = 1;
  initPage();
};

 

// 打开新增采购订单弹窗
const handleAddPurchase = (row) => {
  addPurchaseVisible.value = true;
};

// 打开产品选择弹窗
const handleOpenProductSelect = async () => {
  try {
    const res = await mockApi.getProductList(productFilter.value);
    if (res.code === 200) {
      productList.value = res.data;
      productSelectVisible.value = true;
    }
  } catch (err) {
    ElMessage.error('加载产品列表失败');
  }
};

// 选择产品（添加到采购列表）
const handleSelectProduct = (product) => {
  purchaseProductList.value.push({
    productName: product.productName,
    productNo: product.productNo,
    brand: productFilter.brand,
    quantity: product.quantity
  });
  productSelectVisible.value = false;
  ElMessage.success('产品已添加到采购列表');
};

// 删除采购产品
const handleDeleteProduct = () => {
  ElMessageBox.confirm(
    '确定要删除选中的产品吗？',
    '提示',
    { type: 'warning' }
  ).then(() => {
    // 实际项目中需筛选未选中的产品
    ElMessage.success('产品已删除');
  });
};

// 提交采购订单
const handleSubmitPurchase = async () => {
  try {
    const res = await mockApi.submitPurchase({
      ...purchaseForm.value,
      products: purchaseProductList.value
    });
    if (res.code === 200) {
      ElMessage.success(res.message);
      addPurchaseVisible.value = false;
    }
  } catch (err) {
    ElMessage.error('提交采购订单失败');
  }
};

// 打开往期订单弹窗
const handleHistoryOrder = async (row) => {
  try {
    const res = await mockApi.getHistoryOrder({ factory: row.brand });
    if (res.code === 200) {
      historyOrderList.value = res.data;
      historyTotal.value = res.total;
      historyOrderVisible.value = true;
    }
  } catch (err) {
    ElMessage.error('加载往期订单失败');
  }
};

// 往期订单分页切换
const handleHistoryPageChange = (val) => {
  historyCurrentPage.value = val;
  handleHistoryOrder({ brand: '工厂A' }); // 实际项目传工厂参数
};

// 往期订单页码跳转
const handleHistoryJumpPage = () => {
  const page = Number(historyJumpPage.value);
  if (page && page >= 1 && page <= historyTotalPages.value) {
    historyCurrentPage.value = page;
    handleHistoryOrder({ brand: '工厂A' });
  } else {
    ElMessage.error(`请输入1-${historyTotalPages.value}之间的页码`);
  }
};

// 打开查看弹窗（品牌管理）
const handleViewDetail = async (row) => {
  try {
    const res = await mockApi.getBrandProductList({ factory: row.brand });
    if (res.code === 200) {
      brandProductList.value = res.data;
      brandTotal.value = res.total;
      detailVisible.value = true;
    }
  } catch (err) {
    ElMessage.error('加载品牌产品列表失败');
  }
};

// 品牌管理分页切换
const handleBrandPageChange = (val) => {
  brandCurrentPage.value = val;
  handleViewDetail({ brand: '工厂A' }); // 实际项目传工厂参数
};

// 品牌管理页码跳转
const handleBrandJumpPage = () => {
  const page = Number(brandJumpPage.value);
  if (page && page >= 1 && page <= brandTotalPages.value) {
    brandCurrentPage.value = page;
    handleViewDetail({ brand: '工厂A' });
  } else {
    ElMessage.error(`请输入1-${brandTotalPages.value}之间的页码`);
  }
};

// 搜索产品（产品选择弹窗）
const handleSearchProduct = async () => {
  try {
    const res = await mockApi.getProductList(productFilter.value);
    if (res.code === 200) {
      productList.value = res.data;
    }
  } catch (err) {
    ElMessage.error('搜索产品失败');
  }
};

// 工厂列表分页切换
const handleCurrentChange = (val) => {
  currentPage.value = val;
  initPage();
};

// 工厂列表条数切换
const handleSizeChange = (val) => {
  pageSize.value = val;
  currentPage.value = 1;
  initPage();
};

// 工厂列表页码跳转
const handleJumpPage = () => {
  const page = Number(jumpPage.value);
  if (page && page >= 1 && page <= totalPages.value) {
    currentPage.value = page;
    initPage();
  } else {
    ElMessage.error(`请输入1-${totalPages.value}之间的页码`);
  }
};

const rouetr = useRouter()

// 素材库（无操作）
const handleMaterialLibrary = () => {
  // ElMessage.info('素材库暂未开放');
  rouetr.push('/material/materialManagement')
};
</script>

<style scoped>
.factory-page {
  padding: 20px;
  background-color: #fff;
  min-height: 100vh;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  border-bottom: 1px solid #eee;
  padding-bottom: 10px;
}

.page-title {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin: 0;
}

.return-btn {
  color: #666;
}

.search-area {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 15px;
}

.el-table {
  font-size: 13px;
}

.el-table th {
  background-color: #f5f7fa;
}

.pagination-area span {
  color: #666;
}

.purchase-header .form-item {
  display: flex;
  align-items: center;
  gap: 5px;
  
}
</style>